<template>
  <div class="host-vulnerability">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">主机漏洞</span>
        <el-button-group class="header-buttons">
          <el-button type="primary" size="small" icon="el-icon-edit">批量修复</el-button>
          <el-button type="success" size="small" icon="el-icon-check">批量验证</el-button>
          <el-button type="info" size="small" icon="el-icon-download" @click="exportData">导出</el-button>
        </el-button-group>
      </div>

      <div class="toolbar">
        <div class="left-area">
          <el-select v-model="vulnType" placeholder="漏洞类型筛选" size="small">
            <el-option label="全部" value="all"></el-option>
            <el-option label="高危" value="high"></el-option>
            <el-option label="中危" value="medium"></el-option>
            <el-option label="低危" value="low"></el-option>
          </el-select>
        </div>
        <div class="right-area">
          <el-input
            v-model="searchQuery"
            placeholder="请搜索客户名称、IP地址、服务器"
            prefix-icon="el-icon-search"
            size="small"
          >
          </el-input>
        </div>
      </div>

      <el-table
        :data="filteredTableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="clientName" label="客户名称" min-width="180"></el-table-column>
        <el-table-column prop="serverIp" label="影响服务器" min-width="180"></el-table-column>
        <el-table-column prop="vulnCount" label="漏洞数量" width="120"></el-table-column>
        <el-table-column prop="unresolvedCount" label="未修复漏洞数量" width="150"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button @click="showDetails(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- Details Dialog -->
    <el-dialog
      :title="clientName + ' - 漏洞详情'"
      :visible.sync="detailsDialogVisible"
      width="80%"
      class="vulnerability-details"
    >
      <!-- Status Banner -->
      <div class="status-banner">
        <el-alert
          title="修复请求已发起..."
          type="info"
          :closable="false"
          show-icon>
        </el-alert>
      </div>

      <!-- Filter Area -->
      <div class="filter-area">
        <el-dropdown @command="handleFilterCommand" trigger="click">
          <el-button type="success" size="small">
            触发成功相应请刷新查看! <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="refresh">刷新</el-dropdown-item>
            <el-dropdown-item command="all">显示全部</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!-- Vulnerability Table -->
      <el-table
        :data="vulnerabilityList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="name" label="漏洞名称" min-width="400">
          <template slot-scope="scope">
            <el-link type="primary">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>

        <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
          <template slot-scope="scope">
            <el-tag type="danger" size="small" v-if="scope.row.urgencyLevel === '高'">
              {{ scope.row.urgencyLevel }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="affectedAsset" label="影响资产" width="150">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <div class="status-indicator">
              <el-tag
                :type="scope.row.status === '未修复' ? 'danger' : 'success'"
                size="small"
              >
                <i class="el-icon-circle-check" v-if="scope.row.status === '修复成功'"></i>
                <i class="el-icon-circle-close" v-else></i>
                {{ scope.row.status }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleFix(scope.row)"
              v-if="scope.row.status === '未修复'"
            >修复</el-button>
            <el-button
              type="text"
              @click="handleUpdateStatus(scope.row)"
            >更新状态</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Pagination -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HostVulnerability',
  data() {
    return {
      vulnType: 'all',
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      tableData: [
        { clientName: '公****', serverIp: '39.98.163.212', vulnCount: 13, unresolvedCount: 1 },
        { clientName: '002****75', serverIp: '8.140.51.64', vulnCount: 11, unresolvedCount: 1 },
        { clientName: '202****21', serverIp: '39.98.190.149', vulnCount: 12, unresolvedCount: 1 },
        { clientName: '发现独****50', serverIp: '39.98.90.201', vulnCount: 7, unresolvedCount: 1 },
        { clientName: '发现独****50', serverIp: '39.99.137.75', vulnCount: 13, unresolvedCount: 2 },
        { clientName: 'clo****模块', serverIp: '121.89.208.80', vulnCount: 3, unresolvedCount: 0 },
        { clientName: '多页签****09', serverIp: '39.101.204.71', vulnCount: 2, unresolvedCount: 1 },
        { clientName: '123****20', serverIp: '39.99.225.79', vulnCount: 2, unresolvedCount: 1 },
        { clientName: '畅捷通****专用', serverIp: '121.89.206.20', vulnCount: 1, unresolvedCount: 1 },
      ],
      selectedRows: [],
      detailsDialogVisible: false,
      selectedRow: {},
      vulnerabilityList: [
        {
          name: '适用于基于 x64 系统 (KB5036909)的 Microsoft server operating system version 21H2 版本的2024-04 累积更新',
          urgencyLevel: '高',
          affectedAsset: '39.98.163.212',
          status: '未修复'
        },
        {
          name: '适用于基于 x64 系统 (KB5035857)的 Microsoft server operating system version 21H2 版本的2024-03 累积更新',
          urgencyLevel: '高',
          affectedAsset: '39.98.163.212',
          status: '修复成功'
        },
        // Add more sample data as needed
      ],
      selectedVulnerabilities: [],
      clientName:'',
    }
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(data => {
        return data.clientName.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          data.serverIp.includes(this.searchQuery)
      })
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    showDetails(row) {
      this.selectedRow = row;
      this.detailsDialogVisible = true;
    },
    fetchData() {
      this.loading = true;
      // Simulate API call
      setTimeout(() => {
        this.total = this.tableData.length;
        this.loading = false;
      }, 500);
    },
    exportData() {
      // Implement export functionality
      console.log('Exporting data...');
    },
    handleFilterCommand(command) {
      if (command === 'refresh') {
        this.fetchVulnerabilityData();
      }
    },
    handleSelectionChange2(val) {
      this.selectedVulnerabilities = val;
    },
    handleSizeChange2(val) {
      this.pageSize = val;
      this.fetchVulnerabilityData();
    },
    handleCurrentChange2(val) {
      this.currentPage = val;
      this.fetchVulnerabilityData();
    },
    handleFix(row) {
      this.$confirm('确认要修复该漏洞吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // Implement fix logic
        this.$message.success('修复请求已发起');
      }).catch(() => {});
    },
    handleUpdateStatus(row) {
      // Implement status update logic
      this.$message.info('正在更新状态...');
    },
    fetchVulnerabilityData() {
      // Implement API call to fetch vulnerability data
      this.total = this.vulnerabilityList.length;
    }
  },
  mounted() {
    this.fetchData();
    this.fetchVulnerabilityData();
  }
}
</script>

<style scoped>
.host-vulnerability {
  padding: 8px;
}

.box-card {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-buttons {
  float: right;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left-area, .right-area {
  display: flex;
  align-items: center;
}

.left-area .el-select {
  margin-right: 10px;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .header-buttons {
    float: none;
    margin-top: 10px;
  }

  .toolbar {
    flex-direction: column;
  }

  .left-area, .right-area {
    width: 100%;
    margin-bottom: 10px;
  }

  .left-area .el-select,
  .right-area .el-input {
    width: 100%;
  }
}
.vulnerability-details {
  min-width: 800px;
}

.status-banner {
  margin-bottom: 20px;
}

.filter-area {
  margin-bottom: 20px;
}

.status-indicator {
  display: flex;
  align-items: center;
}

.status-indicator i {
  margin-right: 4px;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Override element-ui styles */
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-table .cell) {
  white-space: normal;
  line-height: 1.5;
}
</style>
